<template>
	<view class="content" >
		<u-navbar :is-back='false' title="消息中心" />
	<view class="all" :style="{
			height:$height()+'px'
		}">
			<view class="carp" v-for="(item,index) in 4">
				<image src="http://puputong.huijipin.cn/uploads/20220321/22a6549606a809d559c395d510003f5f.png" mode="">
				</image>
				<view class="carp_1">
					<text>系统已为您推荐了10个店铺</text>
					<text>点击立即查看>></text>
				</view>
				<view class="carp_2">
					2021/12/30
				</view>
			</view>
			<view class="carp" >
				<image src="http://puputong.huijipin.cn/uploads/20220321/25eb4894530e77f257607d7a57e918f1.png" mode="">
				</image>
				<view class="carp_1">
					<text>过年了，系统祝你新年快乐！！</text>
					<text>点击立即查看>></text>
				</view>
				<view class="carp_2">
					2021/12/30
				</view>
			</view>
		</view> 
		<fb-pop ref="children" />
		<u-tabbar  @change="change"
		safeAreaInsetBottom v-model="current" :list="$list()" :mid-button="true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		onShow() {

		},
		methods:{
			//发布按钮
			change(index) {
				if(index==2){
					this.$refs.children.sign()
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content{
		position: relative;
		min-height: 1350rpx;
		background-color: #F4F5F7;
	}
	::v-deep .u-tabbar__content {
		padding-bottom: env(safe-area-inset-bottom) !important;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-tabbar__content {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.all {
		background-color: #F4F5F7;
		padding: 30rpx;
		.carp {
			height: 107rpx;
			margin: auto;
			background: #FFFFFF;
			border-radius: 16rpx;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			image {
				width: 76rpx;
				height: 76rpx;
			}
			.carp_2 {
				font-size: 20rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #999999;
			}

			.carp_1 {
				width: 60%;
				text:nth-of-type(1) {
					display: block;
					font-size: 30rpx;
					font-family: OPPOSans;
					font-weight: 500;
					width: 100%;
					color: #181818;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				text:nth-of-type(2) {
					margin-top: 15rpx;
					display: inline-block;
					font-size: 22rpx;
					font-family: OPPOSans;
					font-weight: 500;
					color: #666666;
				}
			}
		}
	}
</style>
